<template>
<!-- 推荐组件 -->
  <div>
    <div class="recommend_wrap">
      <div class="recommend_title">
        <img
          src="//img11.360buyimg.com/jdphoto/jfs/t1/31601/22/15554/14040/5cc2a86fEbdb1098b/88174b36f85283b6.png"
          alt=""
        />
      </div>
      <van-list  v-model="loading" @load="onLoad" offset="-50" :finished="finished" finished-text="没有更多了">
        <div class="recommend_list">
          <div class="recommend_one" v-for="(item, index) in recommendList" :key="index" @click="goInfo(item.goods_id)">
            <img :src="item.image" alt="">
            <p class="pname">
              {{ item.goods_name }}
            </p >
            <div class="price">
              <span>￥{{ item.price }}</span> <span>看相似</span>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
// import {getRecommend} from "../../api/common"
import {mapGetters} from 'vuex'
export default {
    name:"recommend",
    data() {
        return {
            // recommendList:[],
            finished:false,//是否加载完成
            page:1,
            loading:false//是否处于加载状态
        }
    },
    computed: {
      ...mapGetters("homeStore",["recommendList"])
    },
    methods: {
        getRecommends(p) {
          // 请求之前处于加载状态
          this.loading = true
          this.$store.dispatch('homeStore/getrecommend',p,false).then((res)=>{
          this.loading =  res
          })
        },
        goInfo(gid){
          this.$router.push({
            path:`/info/${gid}`
          })
        },
        onLoad(){
          // 触发上拉
          // console.log("page:",this.page)
          this.page++
          // this.$store.dispatch('getrecommend',this.page)
          if(this.page>15){
            this.finished = true//结束上拉
            return false
          }
          this.getRecommends(this.page)

        }
    },
    created() {
        this.getRecommends(this.page) 
    },
}
</script>

<style lang="less" scoped>

.recommend_wrap {
    margin-top: 80px;
    margin-bottom: 100px;
  .recommend_title {
    width: 100%;
    height: 70px;
    img {
      width: 100%;
      height: 70px;
    }
  }
  .recommend_list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .recommend_one {
      margin-top: 10px;
      margin-bottom: 30px;
      box-sizing: border-box;

      background: white;
      width: 45%;
      height: 500px;
      img {
        width: 320px;
        height: 320px;
      }
      .pname {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        height: 80px;
        line-height: 40px;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        display: flex;
        padding: 0 30px;
        box-sizing: border-box;
        justify-content: space-between;
        span:nth-child(1) {
          color: red;
          font-size: 30px;
          line-height: 40px;
        }
        span:nth-child(2) {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #ccc;
        }
      }
    }
  }
}
</style>